<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- <script type="text/javascript" src="../js/index.js"></script> -->
<style type="text/css" media="screen">
p{ 
	text-indent:2em;
}
.article-foot{
	margin-bottom: 0px;
	/*background:red;*/
}
.article-list{
	float: left;
	display: block;
	width: 20px;
	height: 20px;
	color: #fff;
	background-color: #4095D5;
}
.article-listHeader{
	color:#fff;
	background-color: #4095D5;
}
.btn-submit{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
</style>
</head>
<body>

    <div id="news">
		<!-- 导航条 -->

		<nav class="navbar navbar-default">
    		<div class="container">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        </button>
      				<a class="navbar-brand" href="#">青年文摘<span class="sr-only">(current)</span></a>
    			</div>

    			<div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
    				<ul class="nav navbar-nav">
    					<li class="active"><a href="index.html" title="">首页</a></li>
						<!--获取分类数据-->
    					<li v-for="(item,index) in nav" @click="rankJump0(index)"><a  title="">{{item}}</a></li>
						<!--获取分类数据结束-->
    					<li><a  href="collection.html">我的收藏</a></li>
    				</ul>
    				<div class="btn-group navbar-right" v-show="true">
					   	<a class="btn btn-success navbar-btn" href="login.html">登录</a>
					   	<a class="btn btn-success navbar-btn" href="register.html">注册</a>
				   </div>
    				<form class="navbar-form navbar-right" role="search">
					    <div class="form-group">
						     <a href="search.html">
						    	<input type="text" class="form-control" placeholder="搜索" />
						   </a>

					    </div>
				   </form>
    			</div>
    		</div>
    	</nav>
		<!--导航条结束-->

		<!--展示所有标题-->
    	<div class="content container" v-if="index">
    		<div class="row">
			  <div class="col-md-7 col-xs-7 col-md-offset-1 col-xs-offset-1 jumbotron">
			  	<article v-for="(item,index) in article">
			  		<h3 class="text-center" style="font-size: 20px">{{item.title}}</h3>
			  		<!--<div class="col-md-12 col-xs-12" v-html="item.content"></div>-->
			  		<div class="article-foot">
						<!--点赞-->
				  		<a class="btn btn-defult btn-sm"  role="button" v-on:click="count(item.id,index)">
				  			<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">{{item.zan}}
				  			</span>
				  		</a>
						<!--收藏-->
				  		<a class="btn btn-defult btn-sm" @click="clickCollect(item.id)"  role="button">
				  			<span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
				  		</a>
						<!--查看文章-->
				  		<a class="btn btn-defult btn-sm" @click="commentJump(item.id)" role="button">
				  		   <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>	
				  		</a>
						<!--转发-->
				  		<a class="btn btn-defult btn-sm article-btn" href="#" role="button">
				  		   <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>	
				  		</a>
			  		</div>
					<p style="height: 3px;background: #fff;"></p>
			  	</article>
			  </div>
			  <!-- 右边开始 -->
			  <div class="col-md-4 col-xs-4">
			  	<ul class="list-group">
			  		<li class="list-group-item article-listHeader">人气排行榜</li>
			  		<li  v-for="(item,index) in rank" class="list-group-item text-center" @click="rankJump(item.id)"><span  class="article-list">{{index+1}}</span>{{item.title}}</li>
			  	</ul>
			  </div>
			  <!-- 右边结束 -->
			</div>
    	</div>
		<!--展示结束-->

	</div>
    <script type="text/javascript">
		console.log(sessionStorage.tag);
    	       var news = new Vue({
		            el:'#news',
		            data:{
		                nav:null,
						rank:null,
		            	age:null,
		                article:null,//展示标题
						article1:null,//展示完整文章内容
						index:true,//首页是否显示
						comment:false,//文章页是否显示
						collection:false,//收藏页是否显示
                        arr:[{name:'山海经',time:"2018-05-17"},{name:'山海经',time:"2018-05-17"}]
		            },
		            methods:{
		                //人气排行榜跳转取值
		                rankJump:function(n) {
		                    console.log('分类id',n);
						},
						//导航跳转取值，查询文章内容
						rankJump0:function(n) {

		                    var that = this;
                            console.log('文章id',n);
                            $.ajax({
                                url:'http://news.cn/index.php/index/Page/content',
                                type:'post',
								data:{id:n},
                                dataType:'json',
                                success:function(data) {
                                    // console.log(data);
                                    that.article = data.data;

                                }
                            });
                        },
						//人气排行榜点击条状
						rankJump:function(n) {
                            location.href="comment.html?="+n;
						},
                        //点赞
						count:function(n,index) {
		                    // alert(n);
		                    let that = this;
                            $.ajax({
                                url:'http://news.cn/index.php/index/Page/zan',
                                type:'post',
                                data:{id:n},
                                dataType:'json',
                                success:function(data) {
                                    console.log(data);
                                    that.article[index].zan++;

                                }
                            });
						},

                        commentJump:function(id) {
                            location.href="comment.html?="+id;
                        },
						//收藏
						clickCollect: function(id) {
                            if (sessionStorage.tag != 1) {
                                alert('请先登录再收藏!');
                                return false;
                            } else {
                                let user_id = sessionStorage.id;
                                $.ajax({
                                    url: 'http://news.cn/index.php/index/Page/collect',
                                    type: 'post',
                                    data: {'user_id': user_id, 'id': id},
                                    dataType: 'json',
                                    success: function (data) {
                                        // console.log(data);
                                        alert(data.msg);
                                    }
                                });
                            }
                        }
		            },
		            created:function(){
		            		let that = this;
		            		//获取导航分类信息
		            		$.ajax({
		            			url:'http://news.cn/index.php/index/Page/selGroup',
		            			type:'post',
		            			dataType:'json',
		            			success:function(data) {
		            			    // console.log(data);
		            				that.nav = data.data;
		            			}
		            		});

		            		//获取人气排行榜
                        $.ajax({
                            url:'http://news.cn/index.php/index/Page/rank',
                            type:'post',
                            dataType:'json',
                            success:function(data) {
                                // console.log(data);
                                that.rank = data.data;
                            }
                        });

                        //获取所有文章内容
                        $.ajax({
                            url:'http://news.cn/index.php/index/Page/contentAll',
                            type:'post',
                            dataType:'json',
                            success:function(data) {
                                console.log(data);
                                that.article = data.data;

                            }
                        });
		            }
		        })
    	
    </script>
</body>
</html>